<template>
	<div>
		<mt-swipe :auto="4000" >
			<!-- 哪个父组件使用这个小组件，就要给他传递lunbotuList -->
		  <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
			  <!-- 一般来说插入src的是item.img，这个是服务器内的文件路径，但是服务器没有放置图片，所以直接使用网络url地址 -->
			  <!-- 注意：通过绑定属性class和父组件传递过来的 isfull值确定图片宽度-->
			  <img :src="item.url" alt="" :class="{full:isfull}">
		  </mt-swipe-item>
		</mt-swipe>
	</div>
</template>

<script>
	export default{
		// 接收父组件传递的lunbotuList
		props:["lunbotuList","isfull"]
	};
</script>

<style lang="scss" scoped>
	// 查看网页源码，找到轮播图的类名，设置高度，否则看不到轮播图
	.mint-swipe{
		height: 200px;
		// 样式里面的花括号继续嵌套属于sass语法，需要提前安装相应的loader
		.mint-swipe-item{
			text-align: center;
			// // 规定属于其父元素的第n个子元素
			// &:nth-child(1){
			// 	background-color: red;
			// }
			// &:nth-child(2){
			// 	background-color: blue;
			// }
			// &:nth-child(3){
			// 	background-color: black;
			// }
		}
		img{
			height: 100%;
			// width: 100%;
		}
	}
	// 可为可不为
	.full{
		width: 100%;
	}
	
</style>
